<div>
	<!-- widget content -->
	<div class="widget-body">

		<form id="checkout-form" class="smart-form">
			<header style="padding: 10px 0;">
				<h2>
					工单详情
					<button class="close" data-dismiss="modal">x</button>
				</h2>

			</header>
			<fieldset style="padding: 8px 14px 0px;">
				<div id="dialog-alert"></div>
				<div class="row">
					<label class="label col" style="width: 120px;">站点</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="siteName"
							disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">区域</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="areaName"
							disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">用户</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="owner"
							disabled class="required" />
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col" style="width: 120px;">系统</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="businessSystemName" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">子系统</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="businessSubSystemName" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">服务名称</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="servName"
							disabled class="required">
						</label>
					</section>
				</div>
			</fieldset>
			<header style="padding: 0px 0;">
				<h6 id="upsqlTitle"></h6>
			</header>
			<fieldset style="padding: 8px 14px 0px;">
				<div class="row">
					<label class="label col" style="width: 120px;">架构</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upsqlArchName" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">版本</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upsqlSoftwareImageName" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">分配策略</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="upsqlMixed"
							disabled class="required" />
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col" style="width: 120px;">数据磁盘大小</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upsqlDataSize" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">数据磁盘类型</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upsqlDataType" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">规模</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upsqlScaleName" disabled class="required" />
						</label>
					</section>

				</div>
				<div class="row">
					<label class="label col" style="width: 120px;">日志磁盘大小</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="upsqlLogSize"
							disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">日志磁盘类型</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="upsqlLogType"
							disabled class="required" />
						</label>
					</section>
				</div>
			</fieldset>
			<header style="padding: 0px 0;">
				<h6 id="upproxyTitle"></h6>
			</header>
			<fieldset style="padding: 8px 14px 0px;">
				<div class="row">
					<label class="label col" style="width: 120px;">架构</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxyArchName" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">版本</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxySoftwareImageName" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">分配策略</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="upproxyMixed"
							disabled class="required" />
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col" style="width: 120px;">数据磁盘大小</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxyDataSize" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">数据磁盘类型</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxyDataType" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">规模</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxyScaleName" disabled class="required" />
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col" style="width: 120px;">日志磁盘大小</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxyLogSize" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">日志磁盘类型</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxyLogType" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">带宽</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="upproxyNetworkBandwidth" disabled class="required" />
						</label>
					</section>
				</div>
			</fieldset>
			<header style="padding: 0px 0;">
				<h6 id="smTitle"></h6>
			</header>
			<fieldset style="padding: 8px 14px 0px;">
				<div class="row">
					<label class="label col" style="width: 120px;">架构</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="smArchName"
							disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">版本</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text"
							id="smSoftwareImageName" disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">分配策略</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="smMixed"
							disabled class="required" />
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col" style="width: 120px;">数据磁盘大小</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="smDataSize"
							disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">数据磁盘类型</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="smDataType"
							disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">规模</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="smScaleName"
							disabled class="required" />
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col" style="width: 120px;">日志磁盘大小</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="smLogSize"
							disabled class="required" />
						</label>
					</section>
					<label class="label col" style="width: 120px;">日志磁盘类型</label>
					<section class="col" style="width: 180px; margin-bottom: 5px;">
						<label class="input"> <input type="text" id="smLogType"
							disabled class="required" />
						</label>
					</section>
				</div>
			</fieldset>
		</form>


	</div>
	<!-- end widget content -->

</div>
<div class="modal-footer"></div>
<script>
	var orderID;
	pageSetUp();

	var area, $area;

	var pagefunction = function() {
		s = $("#jqgrid").jqGrid('getGridParam', 'selarrrow');
		var rowData = $("#jqgrid").jqGrid('getRowData', s);
		orderID = rowData.id;
		sendGet("/upm_manager/v1.0/orders/" + rowData.id, fillForm,
				DialogAlert, null);
	};

	loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);

	function fillForm(data) {
		var orderData = data['data'];
		$('#siteName').val(orderData.siteName);
		$('#areaName').val(orderData.areaName);
		$('#businessSystemName').val(orderData.businessSystemName);
		$('#businessSubSystemName').val(orderData.businessSubSystemName);
		$('#owner').val(orderData.owner);
		$('#servName').val(orderData.servName);

		$.each(orderData.subOrders, function(index, order) {
			if (order.type == "urproxy") {
				$('#upproxyTitle').text("UPREDIS代理");
				$('#upproxyArchName').val(order.archName);
				$('#upproxySoftwareImageName').val(order.softwareImageName);
				$('#upproxyScaleName').val(order.scaleName);
				$('#upproxyNetworkBandwidth').val(order.networkBandwidth);
				$('#upproxyDataSize').val(BytesToSize(order.dataDirSize));
				$('#upproxyDataType').val(order.dataDirTypeText);
				$('#upproxyLogSize').val(BytesToSize(order.logDirSize));
				$('#upproxyLogType').val(order.logDirTypeText);
				$('#upproxyMixed').val(order.mixed);
			} else if (order.type == "upredis") {
				$('#upsqlTitle').text("UPREDIS数据库");
				$('#upsqlArchName').val(order.archName);
				$('#upsqlSoftwareImageName').val(order.softwareImageName);
				$('#upsqlScaleName').val(order.scaleName);
				$('#upsqlDataSize').val(BytesToSize(order.dataDirSize));
				$('#upsqlDataType').val(order.dataDirTypeText);
				$('#upsqlLogSize').val(BytesToSize(order.logDirSize));
				$('#upsqlLogType').val(order.logDirTypeText);
				$('#upsqlMixed').val(order.mixed);
			} else if (order.type == "sentinel") {
				$('#smTitle').text("UPREDIS高可用");
				$('#smArchName').val(order.archName);
				$('#smSoftwareImageName').val(order.softwareImageName);
				$('#smScaleName').val(order.scaleName);
				$('#smDataSize').val(BytesToSize(order.dataDirSize));
				$('#smDataType').val(order.dataDirTypeText);
				$('#smLogSize').val(BytesToSize(order.logDirSize));
				$('#smLogType').val(order.logDirTypeText);
				$('#smMixed').val(order.mixed);
			}
		});
	}
</script>